<template>
	<div id="ZoneDetail">
		<view-box ref="viewBox">
			<div class="main">
				<div class="top">
					<div class="bcontent">
						<x-header :left-options="{showBack: false}" class="header">
							<a slot="left" @click="back()"><i class="dec icon-white-back"></i></a>
							<a slot="right" @click="show2 = !show2"><i class="dec icon-white-share"></i></a>
						</x-header>
						<div class="imglist">
							<swiper :index="imgindex" @on-index-change="indexChange" :show-desc-mask="false" auto :interval="5000" :show-dots="false" :aspect-ratio="536/750">
								<swiper-item v-for="(item,index) in imgLists" :key="index">
									<a href="javascript:;" @click="getphoto(index)">
										<img :src="item.src" class="vux-img" />
									</a>
								</swiper-item>
							</swiper>
							<previewer :list="imgLists" ref="previewer"></previewer>
							<div class="endtime">
								<span class="count">{{imgindex}}/{{imgs_count}}</span>
							</div>
						</div>
					</div>
					<div class="zone-info">
						<flexbox :gutter="0">
							<flexbox-item>
								<p class="tit"><i class="re-icon icon-light"></i>限时秒杀中</p>
								<p class="subtit">限时限量 · 疯狂抢购</p>
							</flexbox-item>
							<flexbox-item>
								<!--<p class="tip">距结束仅剩</p>-->
								<count-down :currentTime="parseInt(cur_time)" :startTime="goodsKill.seckill_starttime" :endTime="goodsKill.seckill_endtime" :tipText="'距开始'" :tipTextEnd="'距结束'" :endText="'已结束'" :dayTxt="'天'" :hourTxt="'时'" :minutesTxt="'分'" :secondsTxt="'秒'"></count-down>
							</flexbox-item>
						</flexbox>
					</div>
					<div class="info">
						<p class="name">{{goodsList.goods_name}}</p>
						<div class="price">
							<div class="current-price">
								<span class="txt">当前价</span>
								<span id="num">{{goodsKill.seckill_price}}</span>
								<span class="yuan">元</span>
							</div>
						</div>
					</div>
					<div class="statis">
						<x-progress :percent="parseInt((goodsKill.seckill_vsales/goodsKill.seckill_num).toFixed(2)*100)" :show-cancel="false"></x-progress>
						<div class="num-tall vux-1px-b">
							<p class="yettxt left">已抢购<span id="numYet">{{goodsKill.seckill_vsales}}</span>件</p>
							<p class="retxt right">仅剩<span id="numRe">{{goodsKill.seckill_num-goodsKill.seckill_vsales}}</span>件</p>
						</div>
					</div>
					<div class="safe">
						<ul>
							<li><i class="by-icon icon-safe"></i>消费者保障</li>
							<li v-if="goodsKill.seckill_shipfee== '0.00'"><i class="by-icon icon-email"></i>包邮</li>
							<li><i class="by-icon icon-refund"></i>售后</li>
						</ul>
					</div>
				</div>
				<div class="body">
					<div class="show-info">
						<h5 class="vux-1px-b">详细介绍</h5>
						<div class="show" v-html="goods_content">
						</div>
					</div>
				</div>
			</div>
		</view-box>

		<div class="offer-box">
			<div class="tool">
				<ul>
					<li @click="shopConcern(goodsList.shop_id)" v-if="shopInfo.follow_state == 0">
						<i class="tp-icon icon-focus"></i>
						<p>关注</p>
					</li>
					<li @click="shopConcern(goodsList.shop_id)" v-else>
						<i class="tp-icon icon-like_on"></i>
						<p style="color: #a30000;">关注</p>
					</li>
					<li>
						<i class="tp-icon icon-store"></i>
						<router-link :to="'/shop/id/' + goodsList.shop_id">
							<p>店铺</p>
						</router-link>
					</li>
				</ul>
			</div>
			<div class="pay" v-if="invited_count >= goodsKill.seckill_coin && goodsKill.seckill_vsales <= goodsKill.seckill_num " @click="checkSpec()">立 即 抢 购</div>
			<div class="nopay" v-else>立 即 抢 购</div>
		</div>
		<div id="light" class="white_content">
			<img :src="'/los' + shareImg" alt="" />
		</div>
		<div id="fade" class="black_overlay" onclick="document.getElementById('fade').style.display='none';document.getElementById('light').style.display='none'"></div>
		<popup v-model="spec" @on-hide="hide()">
			<div class="specInfo">
				<img class="goodsImg" :src="'/los' + goodsList.goods_thumb" alt="" />

				<div class="price">
					<p class="names">{{goodsList.goods_name}}</p>
					<p class="sec_price">￥{{goodsKill.seckill_price}}</p>
					<p class="total">仅剩{{goodsKill.seckill_num-goodsKill.seckill_vsales}}件</p>
				</div>
				<div class="buynum">
					<p>数量<span class="limit">(此商品每人最多限购{{goodsKill.seckill_max}}件)</span></p>
				</div>
				<div class="numcheck">
					<span @click="min(goodsKill.seckill_min)">-</span>
					<i>{{nums}}</i>
					<span @click="add(goodsKill.seckill_max)">+</span>
				</div>
				<div class="button" @click="goodsPay()">确定</div>
			</div>
		</popup>
		<!--分享-->
		<popup v-model="show2" style="height: 2.6rem;background: #fff;z-index: 1000;">
			<div class="share-list">
				<div class="body">
					<ul>
						<li @click="qrcode()">
							<i class="fx-icon icon-qrcode"></i>
							<p class="name">二维码</p>
						</li>
						<li @click="copy()" class="tag-read" :data-clipboard-text="ShareLink">
							<i class="fx-icon icon-link"></i>
							<p class="name">复制链接</p>
						</li>
						<li>
							<i class="fx-icon icon-more"></i>
							<p class="name">点击右上角</p>
						</li>
					</ul>
				</div>
			</div>
		</popup>
		<toast v-model="success " type="text " width="2.8rem ">{{msg}}</toast>
		<toast v-model="cancel " type="text " width="5.2rem ">{{msg}}</toast>
		<loading :show="show1" :text="text"></loading>
	</div>
</template>

<script>
	import bottom from './comp/Footer'
	import $ from 'jquery'
	import CountDown from 'vue2-countdown';
	import Clipboard from 'clipboard';
	import wx from 'weixin-js-sdk';
	import {
		XHeader,
		Grid,
		GridItem,
		Swiper,
		SwiperItem,
		Card,
		Scroller,
		Flexbox,
		FlexboxItem,
		Previewer,
		ViewBox,
		XProgress,
		Toast,
		Popup,
		Loading
	} from 'vux'

	export default {
		data() {
			return {
				imgindex: 1,
				value: 0,
				goodsKill: '',
				cur_time: '',
				percent: '',
				imgLists: [],
				imgs_count: '',
				goodsList: '',
				invited_count: '',
				shareUrl: '',
				shopInfo: '',
				success: false,
				cancel: false,
				show2: false,
				show1: false,
				ShareLink: '',
				text: '加载中',
				shareImg: '',
				goods_content: '',
				seckill_id: '',
				msg: '',
				spec: false,
				nums: 1,
			}
		},
		components: {
			XHeader,
			Grid,
			GridItem,
			Swiper,
			SwiperItem,
			CountDown,
			Card,
			Scroller,
			Flexbox,
			FlexboxItem,
			Previewer,
			ViewBox,
			XProgress,
			Toast,
			Popup,
			Loading
		},
		created() {
			this.invitedCount();
			this.getSecKillInfo();
		},
		methods: {
			//复制链接分享
			copy() {
				var _this = this;
				var clipboard = new Clipboard('.tag-read');
				clipboard.on('success', function(e) {
					_this.success = !_this.success;
					_this.msg = '复制成功';
				})
				clipboard.on('error', e => {
					_this.success = !_this.success;
					_this.msg = '该浏览器不支持自动复制';
					clipboard.destroy();
				})
			},

			checkSpec: function() {
				this.spec = true;
				$('.offer-box').hide();
			},
			hide: function() {
				$('.offer-box').show();
			},
			min: function(minNums) {
				if(this.nums <= minNums) {
					return
				}
				this.nums--;
			},
			add: function(maxNums) {
				if(this.nums >= maxNums) {
					return
				}
				this.nums++;
			},
			qrcode: function() {
				this.show1 = true;
				document.getElementById('light').style.display = 'block';
				document.getElementById('fade').style.display = 'block';
				this.show2 = !this.show2;
				var share_url = window.location.href
				var params = {
					seckill_id: this.seckill_id,
					share_url: share_url,
				}
				console.log(params);
				this.$http({
					method: 'POST',
					url: '/los/api/seckill/share_pic.json',
					data: params
				}).then((result) => {
					if(result.data.code == 1) {
						this.shareImg = result.data.data.share_img_src;
						this.show1 = false;
					}
				}).catch((err) => {

				})
			},

			getSecKillInfo: function() {
				this.seckill_id = this.$route.params.id;
				this.ShareLink = 'http://pm.haowenwan.com/dist/#/ZoneDetail/id/' + this.seckill_id;
				this.$http({
					method: 'GET',
					url: '/los/api/seckill/goods_details.json?seckill_id=' + this.seckill_id,
					data: ''
				}).then((result) => {
					this.goodsKill = result.data.seckill;
					this.percent = this.goodsKill.seckill_vsales;
					this.goodsList = result.data.goods;
					this.goods_content = this.goodsList.goods_content;
					this.cur_time = result.data.cur_time;
					this.imgLists = result.data.goods_imgs;
					this.shopInfo = result.data.shop;
					this.imgs_count = result.data.goods_imgs_count;
					this.getWXShare()
				}).catch((err) => {
					console.log(err);
				})
			},
			//微信分享
			getWXShare: function() {
				let _this = this;
				let urls = window.location.href;
				var ua = navigator.userAgent.toLowerCase();
				if(/iphone|ipad|ipod/.test(ua)) {
					if(urls.indexOf("?") != -1) {
						this.shareUrl = window.location.href;
					} else {
						this.shareUrl = 'http://pm.haowenwan.com/dist/#/';
					}
				} else if(/android/.test(ua)) {
					this.shareUrl = urls;
				}
				var params = {
					url: this.shareUrl,
				}
				this.$http({
					method: 'POST',
					url: '/los/api/oauth/script',
					data: params,
				}).then((result) => {
					if(result) {
						wx.config({
							debug: result.data.debug,
							appId: result.data.appId,
							timestamp: result.data.timestamp,
							nonceStr: result.data.nonceStr,
							signature: result.data.signature,
							jsApiList: result.data.jsApiList,
						});
						wx.ready(function() {
							wx.onMenuShareAppMessage({
								title: _this.goodsList.goods_name, // 分享标题
								desc: _this.goodsList.goods_content.replace(/<[^>]+>/g, ""), // 分享描述
								link: urls, //分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
								imgUrl: 'http://pm.haowenwan.com' + _this.goodsList.goods_thumb, // 分享图标
								type: 'link', // 分享类型,music、video或link，不填默认为link
								dataUrl: '', // 如果type是music或video，则要提供数据链接，默认为空
								success: function(res) {
									_this.shareCallback('ShareAppMessage', shareUrl)
								},
								cancel: function(err) {
									// 用户取消分享后执行的回调函数
								}
							});
							//分享朋友圈
							wx.onMenuShareTimeline({
								title: _this.goodsList.goods_name + '\n' + _this.goodsList.goods_content.replace(/<[^>]+>/g, ""), // 分享标题
								link: urls, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
								imgUrl: 'http://pm.haowenwan.com' + _this.goodsList.goods_thumb, // 分享图标
								success: function() {
									_this.shareCallback('ShareTimeline', shareUrl)
									// 用户点击了分享后执行的回调函数
								},
							});
							wx.error(function(res) {});
						})
					} else {
						alert('获取信息失败 请重新尝试');
					}
				}).catch((err) => {
					console.log(err);
				})
			},

			//点击店铺关注
			shopConcern: function(shop_id) {
				console.log(shop_id);
				this.$http({
					method: 'POST',
					url: '/los/api/shop/follow.json?shop_id=' + shop_id,
					data: ''
				}).then((result) => {
					console.log(result);
					this.$nextTick(() => {
						this.getSecKillInfo();
					})
					this.success = !this.success;
					this.msg = result.data.msg;
				}).catch((err) => {
					console.log(err);
				})
			},
			//判断邀请人数
			invitedCount: function() {
				this.$http({
					method: 'GET',
					url: '/los/api/member/invited_count.json',
					data: ''
				}).then((result) => {
					this.invited_count = result.data.invited_count;
				}).catch((err) => {
					console.log(err);
				})
			}, //点击付款
			goodsPay: function() {
				let seckill_id = this.$route.params.id;
				var params = {
					seckill_id: seckill_id,
					goods_num: this.nums
				}
				this.$http({
					method: 'POST',
					url: '/los/api/seckill/goods_buy.json',
					data: params
				}).then((result) => {
					console.log(result);
					if(result.data.code == 1) {
						this.cancel = !this.cancel;
						this.msg = result.data.msg;
						this.$http({
							method: 'POST',
							url: result.data.url,
							data: ''
						}).then((rst) => {
							if(rst.data.code == 1) {
								location.href = '#/PaymentPage/id/' + rst.data.data.pay_sn;
								$('.offer-box').show();
							}
						}).catch((err) => {

						})
					}
				}).catch((err) => {
					console.log(err);
				})
			},

			back: function() {
				window.history.go(-1);
			},
			indexChange(index) {
				this.imgindex = index + 1;
			},
			getphoto(index) {
				this.$refs.previewer.show(index);
			},
		}
	}
</script>

<style scoped>
	#ZoneDetail {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}
	/*商品展示规格*/

	.specInfo {
		height: 9rem;
		background: #fff;
		padding: 0 0.26rem;
		overflow: hidden;
		position: relative;
		/*padding-top: 1rem;*/
	}

	.specInfo .goodsImg {
		width: 2.4rem;
		height: 2.4rem;
		margin: 0.26rem 0;
		float: left;
		border-radius: 0.1rem;
	}

	.specInfo .price {
		float: left;
		width: 65%;
		height: 2.4rem;
		margin: 0.26rem;
	}

	.specInfo .price .total {
		font-size: 0.37rem;
		margin-top: 0.26rem;
	}

	.specInfo .sec_price {
		font-size: 0.42rem;
		color: #a30000;
		margin-top: 0.4rem;
	}

	.specInfo .price .names {
		margin-top: 0.3rem;
		font-size: 0.37rem;
	}

	.specInfo .buynum {
		height: 1.3rem;
		line-height: 1.3rem;
		margin-top: 2.8rem;
	}

	.specInfo .buynum .limit {
		color: #a30000;
		margin-left: .26rem;
	}

	.specInfo .buynum p {
		float: left;
		width: 100%;
		font-size: 0.37rem;
	}

	.specInfo .numcheck {
		float: left;
		overflow: hidden;
	}

	.specInfo .numcheck span {
		width: 0.8rem;
		height: 0.8rem;
		text-align: center;
		color: #aaa;
		border: solid 1px #ccc;
		display: inline-block;
		line-height: 0.8rem;
		float: left;
		font-size: 0.52rem;
	}

	.specInfo .numcheck i {
		font-style: normal;
		width: 1.13rem;
		height: 0.8rem;
		border-top: solid 1px #ccc;
		border-bottom: solid 1px #ccc;
		color: #333;
		font-size: 0.29rem;
		display: inline-block;
		text-align: center;
		line-height: 0.8rem;
		float: left;
	}

	.specInfo .button {
		position: absolute;
		bottom: 0.4rem;
		line-height: 1.3rem;
		background: #a30000;
		border-radius: 0.05rem;
		text-align: center;
		font-size: 0.4rem;
		color: #fff;
		width: 9.46rem;
		margin: 0 auto;
	}

	.main {
		position: relative;
	}

	.dec {
		width: 0.85rem;
		height: 0.85rem;
		background-size: 100% 100%;
		background-position: 0 0;
		display: inline-block;
	}

	.bcontent {
		position: relative;
	}

	.bcontent .header {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		z-index: 99;
	}

	.header {
		background-color: transparent !important;
	}

	.main .top,
	.main .body {
		margin-bottom: 0.26666rem;
		background-color: #fff;
	}

	.main .imglist {
		position: relative;
	}

	.main .imglist .endtime {
		position: absolute;
		bottom: 0;
		padding: 0 0.26666rem;
		width: 100%;
		height: 1.17333rem;
		line-height: 1.25333rem;
		font-size: 0.34666rem;
		color: #fff;
		/*background: rgba(0, 0, 0, .3);*/
		overflow: hidden;
	}

	.main .imglist .endtime .count {
		float: right;
		margin: 0.18666rem 0;
		width: 0.8rem;
		height: 0.8rem;
		line-height: 0.85333rem;
		text-align: center;
		background: linear-gradient(rgb(0,0,0,0),rgb(0,0,0,0.5));
		border-radius: 50%;
	}

	.main .top .zone-info {
		padding: 0.13333rem 0.26666rem;
		color: #fff;
		background-color: #f7173b;
	}

	.main .top .zone-info .tit {
		padding-top: 0.10666rem;
		padding-bottom: 0.16rem;
		font-size: 0.4rem;
		line-height: 1;
	}

	.main .top .zone-info .subtit {
		font-size: 0.29333rem;
		line-height: 1;
	}

	.main .top .zone-info .tip {
		padding-bottom: 0.16rem;
		line-height: 1;
		text-align: center;
		font-size: 0.29333rem;
	}

	.main .top .zone-info .count-down {
		margin: 0 auto;
		text-align: center;
		display: block;
	}

	.main .info {
		position: relative;
		padding: 0 0.26666rem;
	}

	.main .info .name {
		padding: 0.48rem 0 0.61333rem;
		font-size: 0.42666rem;
		line-height: 1;
	}

	.main .info .price {
		padding-bottom: 0.61333rem;
		line-height: 1.1;
		overflow: hidden;
	}

	.main .info .price .current-price {
		float: left;
	}

	.main .info .price .current-price .txt {
		position: relative;
		float: left;
		margin-right: 0.4rem;
		font-size: 0.37333rem;
		color: #da4240;
	}

	.main .info .price .current-price .txt:after {
		content: 'RMB';
		position: absolute;
		top: 0.4rem;
		left: 0;
		letter-spacing: 0.18666rem;
		font-size: 0.34666rem;
		color: #ffc1c0;
	}

	.main .info .price .current-price span {
		font-size: 0.66666rem;
		color: #DA4240;
	}

	.main .info .price .current-price .yuan {
		font-size: 0.32rem;
		color: #da4240;
	}

	.main .info .price .val-price {
		float: left;
		position: relative;
		margin-left: 1.46666rem;
		padding-top: 0.16rem;
		font-size: 0.37333rem;
		color: #aaa;
	}

	.main .info .price .val-price:after {
		content: '';
		position: absolute;
		top: 60%;
		left: 0;
		width: 100%;
		height: 1px;
		background-color: #aaa;
	}

	.main .statis {
		padding: 0 0.26666rem;
		overflow: hidden;
	}

	.main .statis .num-tall {
		padding-bottom: 0.50666rem;
		overflow: hidden;
		line-height: 1;
		font-size: 0.32rem;
		margin-top: 0.2rem;
	}

	.main .statis .num-tall .yettxt {
		color: #777;
	}

	.main .statis .num-tall .retxt {
		color: #DA4240;
	}

	.main .body .show-info h5 {
		padding: 0.45333rem 0.26666rem;
		height: 1.30666rem;
		font-size: 0.4rem;
		line-height: 1;
	}

	.main .body .show-info .show {
		padding: 0.26666rem;
		font-size: 0.34666rem;
		color: #777;
		line-height: 0.61333rem;
	}

	.main .safe ul {
		overflow: hidden;
		padding: 0 0.26666rem;
	}

	.main .safe ul li {
		float: left;
		margin-right: 0.66666rem;
		height: 1.17333rem;
		line-height: 1.22666rem;
		color: #DA4240;
	}

	.main .safe ul li i {
		float: left;
		margin-top: 0.34666rem;
		margin-right: 0.16rem;
	}

	.offer-box {
		position: absolute;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 1.30666rem;
		box-shadow: 0 -5px 10px rgba(102, 102, 102, .1);
		background-color: #fff;
		z-index: 999;
	}

	.offer-box {
		overflow: hidden;
	}

	.offer-box .tool {
		float: left;
		width: 28%;
	}

	.offer-box .tool ul {
		overflow: hidden;
	}

	.offer-box .tool ul li {
		float: left;
		width: 50%;
		padding: 0.18666rem 0;
		text-align: center;
		font-size: 0.29333rem;
		color: #aaa;
	}

	.offer-box .calculator {
		float: left;
		width: 48%;
	}

	.offer-box .pay {
		float: left;
		padding: 0.44rem 0;
		width: 72%;
		height: inherit;
		color: #fff;
		font-size: 0.42666rem;
		text-align: center;
		line-height: 1;
		background-color: #A30000;
		display: block;
	}

	.offer-box .nopay {
		float: left;
		padding: 0.44rem 0;
		width: 72%;
		height: inherit;
		color: #fff;
		font-size: 0.42666rem;
		text-align: center;
		line-height: 1;
		background-color: #aaa;
		display: block;
	}

	.offer-box .calculator .weui-cell {
		padding: 0.26666rem 0 !important;
	}
	/*分享*/

	.share-list {
		height: 100%;
		padding: 0.26rem;
	}

	.share-list ul {
		overflow: hidden;
	}

	.share-list ul li {
		float: left;
		width: 33.33%;
		text-align: center;
	}

	.share-list ul li p {
		margin-top: 0.2rem;
	}

	#light b {
		font-size: 0.4rem;
		line-height: 0.4rem;
		width: 100%;
		margin: 0 auto;
		text-align: center;
		margin: 0.26rem 0 0.37rem 0;
		display: block;
	}

	#light {
		overflow: hidden;
	}

	#light .proInfo {
		font-size: 0.37rem;
		line-height: 0.5rem;
		padding: 0.26rem;
	}

	#light img {
		padding: 0.26rem;
		width: 100%;
		height: 100%;
	}

	.black_overlay {
		display: none;
		position: absolute;
		top: 0%;
		left: 0%;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, .8);
		z-index: 1001;
		overflow: hidden;
	}

	.white_content {
		display: none;
		position: absolute;
		top: 1.2rem;
		left: 0.64rem;
		height: 13.44rem;
		width: 8.77rem;
		margin: 0 auto;
		border-radius: 0.13rem;
		z-index: 1002;
		overflow: auto;
	}

	.nextPage {
		width: 8.56rem;
		height: 1.3rem;
		left: 0.72rem;
		background: #a30000;
		color: #fff;
		line-height: 1.3rem;
		text-align: center;
		border-radius: 0.05rem;
		font-size: 0.4rem;
		margin: 2rem auto 0.4rem;
	}

	.white_content .close {
		background: #a30000;
		height: 1rem;
		display: block;
		width: 100%;
		color: #fff;
		font-size: 0.4rem;
		line-height: 1rem;
		text-align: center;
	}
</style>

<style>
	.main .top .zone-info .count-down span {
		width: 0.50666rem;
		height: 0.50666rem;
		line-height: 0.50666rem;
		font-size: 0.34666rem !important;
		display: inline-block;
		text-align: center;
		background-color: #151515;
		border-radius: 0.05333rem;
	}

	.main .top .zone-info .count-down i {
		padding-right: 0.13333rem;
	}

	.main .body .show-info .show p img {
		width: 100%!important;
	}
</style>
